<template>
    <div>
        <h3>门店增加</h3>
         <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td>
                        <input type="text" v-model="info.shopName">
                    </td>
                </tr>
                <tr>
                    <td align="right">分店名称</td>
                    <td>
                        <input type="text" v-model="info.brancName">
                    </td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.photo"
                         width="100"
                         height="100"
                         v-if="info.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td>
                        <input type="date" v-model="info.openTime">
                    </td>
                </tr>
                <tr>
                    <td align="right">门店状态</td>
                    <td>
                        <input type="radio" name="state" v-model="info.state" :value="true"> 开启
                        <input type="radio" name="state" v-model="info.state" :value="false"> 禁用
                    </td>
                </tr>
                <tr>
                    <td align="right">门店特色</td>
                    <td>
                        <input type="checkbox" name="tese" v-model="info.tese" value="办婚宴"> 办婚宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="升学宴"> 升学宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="满月宴"> 满月宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="彭于宴"> 彭于宴
                    </td>
                </tr>
                <tr>
                    <td align="right">联系电话</td>
                    <td>
                        <input type="text" v-model="info.tel" maxlength="11"> 
                    </td>
                </tr>
                <tr>
                    <td align="right">门店简介</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="info.desc">

                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店地址</td>
                    <td>
                       <select v-model="info.addressId">
                            <option value="">请选择</option>
                            <option v-for="item in type" :value="item.id">{{item.addressName}}</option>
                       </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店类型</td>
                    <td>
                       <select v-model="info.shopType">
                            <option value="">请选择</option>
                            <option value="普通酒店">普通酒店</option>
                            <option value="豪华酒店">豪华酒店</option>
                       </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                            <input type="button" class="btn btn-success" value="修改"  @click="Add">
                    </td>
                </tr>
            </tbody>
         </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
    BangaddRess();
    FindType();
})
//反填
const FindType=()=>{
    axios({
        url:'/api/Shops/FindShop',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then((res)=>{
        console.log(res);
        Object.assign(info,res.data)
        info.openTime=res.data.openTime.substr(0,10)
        info.tese=res.data.tese.split(',');
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
//下拉框
let type:any=ref([]);
const BangaddRess=()=>{
    axios({
        url:'/api/Shops/BangShopAddress',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        type.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//门店修改
let info:any=reactive({
  "shopId":route.query.id,
  "shopName": "",
  "brancName": "",
  "photo": "",
  "openTime": "",
  "state": true,
  "tese": [],
  "tel": "",
  "desc": "",
  "addressId": '',
  "shopType": "",
})
const Add=()=>{
    if(info.shopName==""){
        alert('门店名称不能为空')
        return;
    }
    if(info.brancName==""){
        alert('分店名称不能为空')
        return;
    }
    if(info.photo==""){
        alert('图片必填')
        return;
    }
    if(info.openTime==""){
        alert('开业时间不能为空')
        return;
    }
    if(info.tese.length==""){
        alert('门店特色必选')
        return;
    }
    if(info.tel==""){
        alert('联系电话不能为空')
        return;
    }
    if(info.desc==""){
        alert('简介不能为空')
        return;
    }
    if(info.desc.length>50){
        alert('简介长度不能超过50')
        return;
    }
    if(info.addressId==""){
        alert('地址必选')
        return;
    }
    if(info.shopType==""){
        alert('酒店类型必选')
        return;
    }
    info.tese=info.tese.toString();
    axios({
        url:'/api/Shops/UpdateShop',
        method:'put',
        data:info
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1){
            alert('门店名称重复')
            return;
        }
        if(res.data>0){
            alert('修改成功')
            router.push('/listshop')
            return;
        }
        else{
            alert('修改失败')
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
//前端图片上传
const img=(e:any)=>{
    //e:表示事件对象  只要出发事件就会存在事件对象
    //获取上传的文件
    var obj=e.target.files[0];
    //将上传的文件转成formData格式  转成表单对象并且是键值对形式
    let f = new FormData();//创建空的表单对象
    f.append("file",obj);
    //发送网络请求上传图片
    axios({
        url:'/api/imgs/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        if(res.data=="不是图片"){
            alert('您上传的不是图片')
            return;
        }
        if(res.data=="大于2M"){
            alert('您上传的图片大于2M')
            return;
        }
        info.photo=res.data;
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
</script>

<style scoped>

</style>